<script>
import ChildVue from "@/components/ChildVue.vue";
// 实例里面声明的方法、属性等 写在 export default 对象中
export default {
    props: ['goods', "message"],
    data() {
        return {
            count: 1,
            user: {
                username: '',
                password: ''
            },
            author: {
                name: 'John Doe',
                books: [
                    'Vue 2 - Advanced Guide',
                    'Vue 3 - Basic Guide',
                    'Vue 4 - The Mystery'
                ]
            },
            firstName: 'hedi',
            lastName: 'wang'
        }
    },
    watch: {
        // 监听基本类型的数据
        count: {
            handler(newVal, oldVal) {
                console.log("newVal", newVal)
            }
        },
        // user: {
        //     handler(newVal, oldVal) {
        //         console.log("newVal", newVal)
        //     },
        //     // 深度监听 可以监听对象属性的改变
        //     deep: true
        // }
        // 监听对象的某一个属性的改变
        "user.username": {
            handler(newVal, oldVal) {
                console.log("newVal", newVal)
            }
        }
    },
    computed: {
        bookLength() {
            // 默认只有 getter 方法只能获取无法修改
            console.log("bookLength计算属性被执行")
            return this.author.books.length
        },
        // 只能读 无法写
        // fullName() {
        //     return this.lastName + this.firstName
        // }
        // 即可以读又可以写 get -- 读的方式 set -- 写的方式
        fullName: {
            get() {
                return this.lastName + " " +  this.firstName
            },
            set(val) {
                console.log(val)
                let split = val.split(" ");
                this.firstName = split[1]
                this.lastName = split[0]
            }
        }
    },
    methods: {
        plus() {
            console.log("plus")
            // 自定义事件 事件名 事件发生的时候传递的参数
            this.$emit('add', this.goods)
        },
        getLength() {
            console.log("getLength函数被执行")
            return this.author.books.length
        }
    },
    inject: ['msg'],
    components: {
        ChildVue
    }

}
</script>
<!-- template -->
<template>
    <!--<button @click="count ++">{{ count }}</button>-->
    <!--<input v-model="user.username"/> <br/>-->
    <!--<input v-model="user.password"/> <br/>-->
    <!--<p>count * 2 = {{ plus() }}</p>-->
    <!--<p>count * 2 = {{ plus() }}</p>-->
    <!--<p>count * 2 = {{ plus() }}</p>-->
    <!--<p>{{ bookLength > 0 ? 'Yes' : 'No' }}</p>-->
    <!--<p>{{ bookLength > 0 ? 'Yes' : 'No' }}</p>-->

    <!--<input placeholder="firstName" v-model="firstName" /><br />-->
    <!--<input placeholder="lastName" v-model="lastName" /><br />-->
    <!--<input v-model.lazy="fullName" placeholder="fullName"/>-->
    <div>
        <img :src="goods.image" />
        <span>{{ goods.name }}</span>
        <span>{{ goods.price }}</span>
        <span>{{ goods.count }}</span> <button @click="plus">+</button>
    </div>
    <child-vue :message="message"/>
    {{msg}}
</template>

<style scoped>

</style>